/*
    This function draws the main GUI.
*/
function drawGui(page) {
    manager = new DrawnManager(content,0,0,content.width,content.height,"blue");
    slide = manager.containerArea;
    
    var pageSize = manager.containerDisplayArea.width;
    
    // Draw the first page.
    todo = new DrawnContainer( manager.containerArea, 0, 0, pageSize, 3, TODO );
    
    todo.posts[0] = new DrawnPostIt( todo.postItArea, 0, 2, todo.postItArea.width, TODO );
    for (var i = 1; i < 12; i++) {
        todo.posts[i] = new DrawnPostIt( todo.postItArea, 0, todo.posts[i-1].area.y+todo.posts[i-1].area.height+2, todo.postItArea.width, TODO );        
    }
    
    // Draw the second page.
    doing = new DrawnContainer( manager.containerArea, pageSize*1, 0, pageSize, 2, DOING );
    
    doing.posts[0] = new DrawnPostIt( doing.postItArea, 0, 2, doing.postItArea.width, DOING );
    for (var i = 1; i < 7; i++) {
        doing.posts[i] = new DrawnPostIt( doing.postItArea, 0, doing.posts[i-1].area.y+doing.posts[i-1].area.height+2, doing.postItArea.width, DOING );
    }
    
    impeded = new DrawnContainer( manager.containerArea, pageSize*1, 0+doing.area.height, pageSize, 1, IMPEDED );
    
    impeded.posts[0] = new DrawnPostIt( impeded.postItArea, 0, 2, impeded.postItArea.width, IMPEDED );
    for (var i = 1; i < 6; i++) {
        impeded.posts[i] = new DrawnPostIt( impeded.postItArea, 0, impeded.posts[i-1].area.y+impeded.posts[i-1].area.height+2, impeded.postItArea.width, IMPEDED );
    }
    
    // Draw the third page.
    done = new DrawnContainer( manager.containerArea, pageSize*2, 0, pageSize, 2, DONE );
    
    done.posts[0] = new DrawnPostIt( done.postItArea, 0, 2, done.postItArea.width, DONE );
    for (var i = 1; i < 12; i++) {
        done.posts[i] = new DrawnPostIt( done.postItArea, 0, done.posts[i-1].area.y+done.posts[i-1].area.height+2, done.postItArea.width, DONE );
    }
    
    
    var padding = Math.floor(  ( pageSize - 122 ) / 2 );
    
    burndown = new DrawnContainer( manager.containerArea, pageSize*2, done.area.height, pageSize, 2, BURNDOWN );
    burndown.topics = [];
    burndown.values = [];
    burndown.topics[0] = burndown.postItArea.appendElement( "<label x=\""+0+"\" y=\""+0+"\" width=\""+80+"\" height=\"16\" font=\"Verdana\" size=\"9\" bold=\"true\" color=\"#FFFFFF\" >"+BURN_TOTAL_TASK+"</label>" );
    burndown.values[0] = burndown.postItArea.appendElement( "<label enabled=\"true\" x=\""+80+"\" y=\""+0+"\" width=\""+50+"\" height=\"16\" font=\"Verdana\" size=\"9\" bold=\"false\" color=\"#FFFFFF\" ></label>" );
    burndown.topics[1] = burndown.postItArea.appendElement( "<label x=\""+0+"\" y=\""+16+"\" width=\""+80+"\" height=\"16\" font=\"Verdana\" size=\"9\" bold=\"true\" color=\"#FFFFFF\" >"+BURN_TOTAL_DONE+"</label>" );
    burndown.values[1] = burndown.postItArea.appendElement( "<label x=\""+80+"\" y=\""+16+"\" width=\""+50+"\" height=\"16\" font=\"Verdana\" size=\"9\" bold=\"false\" color=\"#FFFFFF\" ></label>" );
    burndown.topics[2] = burndown.postItArea.appendElement( "<label x=\""+0+"\" y=\""+32+"\" width=\""+80+"\" height=\"16\" font=\"Verdana\" size=\"9\" bold=\"true\" color=\"#FFFFFF\" >"+BURN_DAYS_TO_GO+"</label>" );
    burndown.values[2] = burndown.postItArea.appendElement( "<label x=\""+80+"\" y=\""+32+"\" width=\""+50+"\" height=\"16\" font=\"Verdana\" size=\"9\" bold=\"false\" color=\"#FFFFFF\" ></label>" );
    burndown.topics[3] = burndown.postItArea.appendElement( "<label x=\""+0+"\" y=\""+48+"\" width=\""+80+"\" height=\"16\" font=\"Verdana\" size=\"9\" bold=\"true\" color=\"#FFFFFF\" >"+BURN_PROGRESS+"</label>" );
    burndown.values[3] = burndown.postItArea.appendElement( "<label x=\""+80+"\" y=\""+48+"\" width=\""+50+"\" height=\"16\" font=\"Verdana\" size=\"9\" bold=\"false\" color=\"#FFFFFF\" ></label>" );
    burndown.visible="false";
    /*
    self = burndown.values[0];
    self.onmouseover = function() {
        self.bold = true;
    };
    self.onmouseout = function() {
        self.bold = false;
    };
    self.onmousedown = function() {
        self.color = "#000000";
    };
    self.onmouseup = function() {
        self.color = "#FFFFFF";
    };
    
    
    for (var i = 0; burndown.values[i]; i++) {
        burndown.values[i].onmouseover = function() {
            burndown.values[i].bold = true;
        };
        burndown.values[i].onmouseout = function() {
            burndown.values[i].bold = false;
        };
        burndown.values[i].onmousedown = function() {
            burndown.values[i].color = "#000000";
        };
        burndown.values[i].onmouseup = function() {
            burndown.values[i].color = "#FFFFFF";
        };
    }
    
    */
    
    
    // Draw the last page.
    preferences = new DrawnContainer( manager.containerArea, pageSize*3, 0, pageSize, 2, PREFERENCES );
    preferences.opt = [];
    
    preferences.opt[0] = new LongButton( preferences.postItArea, padding, 5, BUTTON_EDIT_PROJECT, showEditProj );
    preferences.opt[1] = new LongButton( preferences.postItArea, padding, 30, BUTTON_NEW_PROJECT, createProject );
    preferences.opt[2] = new LongButton( preferences.postItArea, padding, 55, BUTTON_REMOVE_PROJECT, removeProject );
    
    colors = new DrawnContainer( manager.containerArea, pageSize*3, 107, pageSize, 2, COLORS );
    colors.opt = [];
    colors.opt[0] = new ColorButton( colors.postItArea, 5, 5, "layoutExpired", DETAILS_EXPIRED );
    colors.opt[1] = new ColorButton( colors.postItArea, 5, 30, "layoutToday", DETAILS_TODAY );
    colors.opt[2] = new ColorButton( colors.postItArea, 5, 55, "layoutNear", DETAILS_NEAR );
    colors.opt[3] = new ColorButton( colors.postItArea, 5, 80, "layoutTask", DETAILS_OTHER );

    updateGui( user.getProject() );
    manager.setPage( page );
}

function saveSettings() {
    options("user")=user.toJSONString();
}

function updateGui( project ) {
    saveSettings();
    
    if (typeof project == typeof new Project()) {
        var posts;
        var post;
        var scroll;
        
        manager.projectLabel.innerText = project.getName();
        
        //Draw TODO post-its
        posts = project.todo.getPosts();
        while (posts[ todo.viewPost ]==null && todo.viewPost>0){ todo.viewPost--; }
        
        scroll = todo.viewPost;
        for (var i = 0; todo.posts[i]; i++) {
            todo.posts[i].setPostIt( posts[scroll] );
            scroll++;
        }
        
        
        
        //Draw DOING post-its
        posts = project.doing.getPosts();
        while (posts[ doing.viewPost ]==null && doing.viewPost>0){ doing.viewPost--; }
        
        scroll = doing.viewPost;
        for (var i = 0; doing.posts[i]; i++) {
            doing.posts[i].setPostIt( posts[scroll] );
            scroll++;
        }
        
        
        //Draw IMPEDED post-its
        posts = project.impeded.getPosts();
        while (posts[ impeded.viewPost ]==null&& impeded.viewPost>0){ impeded.viewPost--; }
        
        scroll = impeded.viewPost;
        for (var i = 0; impeded.posts[i]; i++) {
            impeded.posts[i].setPostIt( posts[scroll] );
            scroll++;
        }
        
        
        //Draw TODO post-its
        posts = project.done.getPosts();
        while (posts[ done.viewPost ]==null && done.viewPost>0){ done.viewPost--; }
        
        scroll = done.viewPost;
        for (var i = 0; done.posts[i]; i++) {
            done.posts[i].setPostIt( posts[scroll] );
            scroll++;
        }

        burndown.data = new Burndown( project );
        burndown.values[0].innerText = burndown.data.totalTasks;
        burndown.values[1].innerText = burndown.data.tasksDone;
        var daysToGo = burndown.data.daysToGo;
        if(daysToGo > 0){
            burndown.values[2].innerText = daysToGo;
        } else if (daysToGo == 0){
            burndown.values[2].innerText = DETAILS_TODAY;
        } else {
            burndown.values[2].innerText = DETAILS_EXPIRED;
        }
        burndown.values[3].innerText = burndown.data.progress + "%";
        
        checkProjectAvailability();
    }

}

function checkProjectAvailability() {
    if (manager) {
        if (user.hasNextProject()) {
            manager.buttonNextProj.enabled = true;
            manager.buttonNextProj.opacity = 255;
        }
        else {
            manager.buttonNextProj.enabled = false;
            manager.buttonNextProj.opacity = 92;
        }
        
        if (user.hasPrevProject()) {
            manager.buttonPrevProj.enabled = true;
            manager.buttonPrevProj.opacity = 255;
        }
        else {
            manager.buttonPrevProj.enabled = false;
            manager.buttonPrevProj.opacity = 92;
        }
    }
};

function createProject() {
    user.createProject();
    updateGui( user.getProject() );

}

function removeProject() {
    user.removeProject();
    updateGui( user.getProject() );
}

function changeProjectName(newName) {
    user.getProject().setName(newName);
}

function parseJSONDate( jstring ) {
	var date = jstring.substring(0, 10);
	var year = parseInt(parseFloat(date.substring(0, 4)));
	var month = parseInt(parseFloat(date.substring(5, 7)));
	var day = parseInt(parseFloat(date.substring(8, 10)));
	date = new Date();
	date.setFullYear(year);
	date.setDate(day);
	date.setMonth(month - 1);
    return date;
}

function parseJSONPostIt(jpost) {

	var post = new PostIt();
    post._id = jpost._id;
    post._task = jpost._task;
    post._description = jpost._description;
    post._stars = jpost._stars;
    post._startDate = parseJSONDate( jpost._startDate );
    post._expirationDate = parseJSONDate( jpost._expirationDate );
    post._finalizationDate = parseJSONDate( jpost._finalizationDate );	
	return post;
}

function parseJSONContainer(tag, jcontainer) {
	
	var container = new Container(tag);
	
	for(var i = 0; jcontainer._posts[i]; i++) {
		container.addPost( parseJSONPostIt(jcontainer._posts[i]) );
	}
	
	return container;

}

function parseJSONProject(jproject) {
	var project = new Project();

	project.name = jproject.name;
	project.startDate = parseJSONDate( jproject.startDate );
	project.finalizationDate = parseJSONDate( jproject.finalizationDate );
	
	project.setTodo( parseJSONContainer(TAG_TODO, jproject.todo) );
	project.setDoing( parseJSONContainer(TAG_DOING, jproject.doing) );
	project.setImpeded( parseJSONContainer(TAG_IMPEDED, jproject.impeded) );
	project.setDone( parseJSONContainer(TAG_DONE, jproject.done) );
	
	return project;
}

function parseJSONUser(jstring) {

    var juser = jstring.parseJSON();
    var user = new User();
    user._project = juser._project;
    user._nextId = juser._nextId;
    
    user.projects = [];
    
    for (var i = 0; juser.projects[i]; i++) {
        user.projects[i] = parseJSONProject(juser.projects[i]);
    }
    
    return user;
    
}
